<template>
  <div class="provider-test">
    <h2>RBO Provider 测试</h2>

    <div class="test-section">
      <h3>Provider 配置</h3>
      <pre>{{ JSON.stringify(rboProvider, null, 2) }}</pre>
    </div>

    <div class="test-section">
      <h3>节点类型测试</h3>
      <div class="node-types">
        <div class="node-category">
          <h4>内部节点 (internal)</h4>
          <div class="node-list">
            <div
              v-for="node in internalNodes"
              :key="node.value"
              class="node-item"
            >
              <IconifyIcon :icon="node.icon" />
              <span>{{ node.label }}</span>
              <code>{{ node.value }}</code>
            </div>
          </div>
        </div>

        <div class="node-category">
          <h4>知识库节点 (knowledge)</h4>
          <div class="node-list">
            <div
              v-for="node in knowledgeNodes"
              :key="node.value"
              class="node-item"
            >
              <IconifyIcon :icon="node.icon" />
              <span>{{ node.label }}</span>
              <code>{{ node.value }}</code>
            </div>
          </div>
        </div>

        <div class="node-category">
          <h4>LLM节点 (llm)</h4>
          <div class="node-list">
            <div v-for="node in llmNodes" :key="node.value" class="node-item">
              <IconifyIcon :icon="node.icon" />
              <span>{{ node.label }}</span>
              <code>{{ node.value }}</code>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h3>Tinyflow 集成测试</h3>
      <div class="tinyflow-container">
        <Tinyflow
          ref="tinyflowRef"
          class="h-full w-full"
          :data="workflowData"
          :provider="rboProvider"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Tinyflow } from '#/components/Tinyflow';

// RBO Provider - 提供节点类型
const rboProvider = {
  // 内部节点类型
  internal: () => [
    {
      value: 'behavior_execute',
      label: '行为执行',
      icon: 'ant-design:play-circle-outlined',
    },
    {
      value: 'service_call',
      label: '服务调用',
      icon: 'ant-design:api-outlined',
    },
    {
      value: 'workflow_sub',
      label: '子工作流',
      icon: 'ant-design:branches-outlined',
    },
    {
      value: 'rule_engine',
      label: '规则引擎',
      icon: 'ant-design:code-outlined',
    },
    {
      value: 'condition',
      label: '条件判断',
      icon: 'ant-design:question-circle-outlined',
    },
    {
      value: 'parallel',
      label: '并行执行',
      icon: 'ant-design:fork-outlined',
    },
    {
      value: 'loop',
      label: '循环执行',
      icon: 'ant-design:reload-outlined',
    },
    {
      value: 'delay',
      label: '延时等待',
      icon: 'ant-design:clock-circle-outlined',
    },
    {
      value: 'event_publish',
      label: '事件发布',
      icon: 'ant-design:notification-outlined',
    },
    {
      value: 'event_listen',
      label: '事件监听',
      icon: 'ant-design:ear-outlined',
    },
    {
      value: 'message_send',
      label: '消息发送',
      icon: 'ant-design:message-outlined',
    },
    {
      value: 'message_receive',
      label: '消息接收',
      icon: 'ant-design:inbox-outlined',
    },
    {
      value: 'data_transform',
      label: '数据转换',
      icon: 'ant-design:swap-outlined',
    },
    {
      value: 'data_filter',
      label: '数据过滤',
      icon: 'ant-design:filter-outlined',
    },
    {
      value: 'data_aggregate',
      label: '数据聚合',
      icon: 'ant-design:cluster-outlined',
    },
    {
      value: 'data_validate',
      label: '数据验证',
      icon: 'ant-design:check-circle-outlined',
    },
  ],
  // 知识库节点类型
  knowledge: () => [
    {
      value: 'knowledge_query',
      label: '知识查询',
      icon: 'ant-design:search-outlined',
    },
    {
      value: 'knowledge_update',
      label: '知识更新',
      icon: 'ant-design:edit-outlined',
    },
    {
      value: 'knowledge_embed',
      label: '知识嵌入',
      icon: 'ant-design:link-outlined',
    },
  ],
  // LLM节点类型
  llm: () => [
    {
      value: 'llm_chat',
      label: 'LLM对话',
      icon: 'ant-design:message-outlined',
    },
    {
      value: 'llm_generate',
      label: 'LLM生成',
      icon: 'ant-design:bulb-outlined',
    },
    {
      value: 'llm_analyze',
      label: 'LLM分析',
      icon: 'ant-design:fund-outlined',
    },
  ],
};

// 计算属性获取节点列表
const internalNodes = computed(() => rboProvider.internal());
const knowledgeNodes = computed(() => rboProvider.knowledge());
const llmNodes = computed(() => rboProvider.llm());

// Tinyflow相关
const tinyflowRef = ref();
const workflowData = ref({
  nodes: [],
  edges: [],
  viewport: { x: 0, y: 0, zoom: 1 },
});

// 调试信息
onMounted(() => {
  console.log('Provider测试页面加载完成');
  console.log('RBO Provider:', rboProvider);
  console.log('内部节点数量:', internalNodes.value.length);
  console.log('知识库节点数量:', knowledgeNodes.value.length);
  console.log('LLM节点数量:', llmNodes.value.length);
});
</script>

<style lang="less" scoped>
.provider-test {
  padding: 24px;

  h2 {
    margin-bottom: 24px;
    color: #1890ff;
  }

  .test-section {
    margin-bottom: 32px;

    h3 {
      margin-bottom: 16px;
      color: #333;
    }

    pre {
      background: #f5f5f5;
      padding: 16px;
      border-radius: 4px;
      overflow: auto;
      max-height: 300px;
    }
  }

  .node-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;

    .node-category {
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 16px;

      h4 {
        margin-bottom: 12px;
        color: #1890ff;
      }

      .node-list {
        .node-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px;
          border-bottom: 1px solid #f0f0f0;

          &:last-child {
            border-bottom: none;
          }

          code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: auto;
          }
        }
      }
    }
  }

  .tinyflow-container {
    height: 400px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>
